<script setup lang="ts">
import {
  ElDatePicker,
  ElForm,
  ElFormItem,
  ElInput,
} from 'element-plus'
import { useDraggable } from '@vueuse/core'
import type { EnergyDataReportInformant } from './types'

const modelValue = defineModel<EnergyDataReportInformant>({
  required: true,
})

const targetRef = ref<HTMLElement | null>(null)
const handleRef = ref<HTMLElement | null>(null)
const { style } = useDraggable(() => toValue(targetRef), {
  handle: handleRef,
  initialValue: () => {
    const winWidth = window.innerWidth
    const winHeight = window.innerHeight
    return {
      x: winWidth - 260,
      y: winHeight - 460,
    }
  },
})

function getData() {
  return modelValue.value
}
defineExpose({
  getData,
})
</script>

<template>
  <div ref="targetRef" :style="style" class="report-person">
    <div ref="handleRef" class="report-person-head">
      完成填报人信息
    </div>
    <ElForm
      :model="modelValue"
      class="form"
      size="small"
      label-position="top"
    >
      <ElFormItem label="填报负责人">
        <ElInput
          v-model.trim="modelValue.personInCharge"
          type="text"
          class="report-input free"
        />
      </ElFormItem>
      <ElFormItem label="填报人">
        <ElInput
          v-model.trim="modelValue.informer"
          type="text"
          class="report-input free"
        />
      </ElFormItem>
      <ElFormItem label="电话">
        <ElInput
          v-model.trim="modelValue.telephone"
          type="text"
          class="report-input free"
        />
      </ElFormItem>
      <ElFormItem label="填报日期">
        <ElDatePicker
          v-model="modelValue.fillInDate"
          type="date"
          value-format="YYYY-MM-DD"
          format="YYYY-MM-DD"
          :clearable="false"
          :editable="false"
          class="free"
          style="--el-date-editor-width: 100%"
        />
      </ElFormItem>
    </ElForm>
  </div>
</template>

<style scoped>
.report-person {
  position: fixed;
  width: 200px;
  border-radius: 4px;
  overflow: hidden;
  background: #ffffff;
  z-index: 3000;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.report-person-head {
  padding: 10px 16px;
  background: #eeeeee;
  text-align: center;
  cursor: move;
}
.form {
  padding: 16px;
}
.form :deep(.el-form-item) {
  margin-bottom: 8px;
}
</style>
